//音乐歌单组件
<template>
  <div class="playlist-item">
    <router-link
      tag="a"
      class="name"
      :to="{
        name:'playlist',
        query:{
          id:playitem.id
        }
      }"
    >
      <div class="music-pic">
        <div class="shadow"></div>
        <div class="playcount">
          <a class="el-icon-caret-right" />
          {{getplaycount}}
        </div>
        <img v-lazy="imgUrl" alt />
        <div class="play-btn">
          <span class="iconfont icon-palyer-start-01"></span>
        </div>
      </div>
    </router-link>
    <div class="dec">
      <router-link
        tag="a"
        class="name"
        :to="{
        name:'playlist',
        query:{
          id:playitem.id
        }
      }"
      >{{playitem.name}}</router-link>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "playlist-item",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    playitem: {
      type: Object,
      require: true,
    },
  },
  data () {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {
    getplaycount: function () {
      let x = this.playitem.playCount || this.playitem.playcount;
      let v = null;
      if (100000 > x) {
        v = x;
      } else if (100000000 > x && x > 100000) {
        v = parseInt(x / 10000) + "万";
      } else if (x > 100000000) {
        v = parseInt(x / 100000000) + "亿";
      }
      return v;
    },
    imgUrl () {
      let img = this.playitem.picUrl || this.playitem.coverImgUrl;
      return img + "?param=180y180";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.playlist-item {
  position: relative;
  width: 180px;
  height: 250px;

  .play-btn {
    position: absolute;
    bottom: 80px;
    right: 10px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    opacity: 0%;
    background-color: rgb(255, 255, 255);
    .icon-palyer-start-01 {
      font-size: 25px;
      padding-left: 5px;
      color: rgb(113, 198, 255);
    }
  }
  .music-pic:hover .play-btn {
    opacity: 100%;
    animation: showbtn 1s;
  }
  @keyframes showbtn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .music-pic {
    overflow: hidden;
  }
  .shadow {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 40px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    opacity: 40%;
    background: linear-gradient(to bottom, #5e5e5e, transparent);
  }
  .playcount {
    position: absolute;
    top: 5px;
    right: 8px;
    color: white;
    font-size: 13px;
  }
  .el-icon-caret-right {
    color: white;
    font-size: 18px;
  }
  .music-pic img {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    cursor: pointer;
  }
  .dec {
    margin-top: 5px;
    overflow: hidden;

    width: 180px;
    height: 65px;
    .name {
      margin-top: 13px;
      font-size: 15px;
      color: rgb(68, 68, 68);
      text-decoration: none;
      text-overflow: ellipsis;
    }
    .name:hover {
      color: black;
    }
    .name:active {
      color: rgb(68, 68, 68);
      text-decoration: none;
    }
  }
}
</style>